<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .table {
            width: 800px;
            max-width: 800px;
            margin: auto;
        }

        h1 {
            text-align: center;
            margin: 30px 0px;
        }

        img {
            width: 80px;
            height: 80px;
        }
    </style>
</head>

<body>
    <h1>商品信息</h1>
    <table width="600" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>商品名</th>
                <th>图片信息</th>
                <th>单价</th>
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- <td>懒人自热小火锅速食牛肉重庆便宜土豆粉自助网红麻辣烫酸</td>
                <td><img src='${item.picture}' /></td>
                <td>9.9</td>
                <td>1000</td> -->
            </tr>
        </tbody>
    </table>
    <script>
        // 获取标签
        let tb = document.getElementsByTagName('tbody')[0];
        // 链接ajax
        let ajaxa = new XMLHttpRequest()
        // 第二步：创建请求连接: 配置请求的方法和路径  ajax对象.open("方法",url)
        ajaxa.open('get', 'http://localhost:3000/index')
        // 第三步：发送ajax请求：ajax对象.send()
        ajaxa.send()
        // 第四步：接收后端响应过来的数据：监听ajax请求的状态 ajax对象.onreadystatechange
        ajaxa.onreadystatechange = function () {
            // 第五步：
            // 当ajaxa.readyState为4的时候，就可以得到后端响应过来的全部数据了（ajax请求状态：进度）
            // 当ajaxa.status 为200的时候，才可以得到正确的结果（ajax请求状态：成功或失败）
            if (ajaxa.readyState != 4 || ajaxa.status != 200) {
                return
            }
            // 解析数据
            let { result } = JSON.parse(ajaxa.responseText)
            result.forEach(item => {
                tb.innerHTML += `<tr> 
                <td>${item.tradeName}</td>
                <td><img src='${item.picture}' /></td>
                <td>${item.price}</td>
                <td>${item.stock}</td></tr>`
            })
        }
    </script>
</body>

</html>